<template>
  <div class="facilityBox">
    <div class="facility-top">
      <div class="titleBox">
        <span>消火栓</span>
      </div>
      <div class="main">
        <div>
          <div class="titleFlag"></div>
          <span class="text-[20px] font-bold">前方指挥部</span>
        </div>
        <!-- 时间线 -->
        <div class="timeLineBox">
          <img src="@/assets/image/icon_fire.png" alt="" />
          <n-timeline horizontal icon-size="20">
            <n-timeline-item
              v-for="item in timeLineList"
              :key="item.jl"
              :title="item.jl + 'm'"
              :content="item.sl + '个'"
            />
          </n-timeline>
        </div>
        <!-- 消防栓 -->
        <div class="xfsBox">
          <div class="xfsLine"></div>
          <div class="flex">
            <img src="@/assets/image/xfs.png" alt="" />
            <div class="xfsMessageBox ml-[25%]">
              <span>管网流量</span>
              <span> 1.25 L/s</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="flex justify-around mt-[15px]">
            <div class="xfsMBox">
              <span>管网压力</span>
              <span>0.2 MPa</span>
            </div>
            <div class="xfsMBox">
              <span>管网直径</span>
              <span>110 mm</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="facility-center">
      <div class="titleBox">
        <span>人工水源</span>
        <span>3700 m³</span>
      </div>
      <div class="rgWaterBox">
        <div v-for="item in rgWaterList" :key="item.id" class="rgWaterList">
          <div>
            <div class="titleFlag"></div>
            <span>{{ item.name }}</span>
          </div>
          <img :src="item.imgUrl" alt="" />
          <span>{{ item.num }} m³</span>
        </div>
      </div>
    </div>
    <!-- 自然水源 -->
    <div class="facility-bottom">
      <div class="titleBox">
        <span>自然水源</span>
      </div>
      <div class="zrWaterBox">
        <img src="@/assets/image/zrsy.png" alt="" />
        <div>
          <div class="textBox">
            <span style="color: rgba(0, 255, 255, 1); font-weight: bolder">长江</span>
            <span>直线距离1.5KM</span>
          </div>
          <div class="line"></div>
        </div>
        <img src="@/assets/image/zysy_jt.png" class="mt-[10px]" alt="" />
      </div>
    </div>
    <!-- 消防设施 -->
    <div class="facility-bottom">
      <div class="titleBox">
        <span>消防设施</span>
      </div>
      <div
        class="flex justify-between flex-wrap items-center"
        style="
          width: 460px;
          max-height: 200px;
          padding: 30px 10px;
          background: rgba(1, 10, 15, 0.5);
        "
      >
        <div v-for="item in equipList" :key="item.id" class="equipBox">
          <span>{{ item.type }}</span>
          <span :class="item.state == '完好' ? 'ok' : 'noOk'">{{ item.state }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryXhsFwTj } from '@/service'
import { useBusinessStore } from '@/store'
// 图片
import xfsc from '@/assets/image/xfsc.png'
import xfsg from '@/assets/image/xfsg.png'
import xfsx from '@/assets/image/xfsx.png'
const store = useBusinessStore()
// 消火栓范围list
const timeLineList = ref([
  {
    jl: '0',
    sl: '0',
  },
  {
    jl: '0',
    sl: '0',
  },
  {
    jl: '0',
    sl: '0',
  },
  {
    jl: '0',
    sl: '0',
  },
])
const getList = (obj: any) => {
  queryXhsFwTj(obj).then((res: any) => {
    timeLineList.value = res
  })
}
const info = computed(() => {
  return { jd: store.jqInfo.jd, wd: store.jqInfo.wd, jlList: '120, 400, 800, 1500' }
})
watch(
  info,
  (newVal, oldVal) => {
    getList(newVal)
  },
  { immediate: true }
)
onMounted(() => {})

// 人工水源list
const rgWaterList = reactive([
  {
    id: 0,
    name: '消防水池',
    num: '3000',
    imgUrl: xfsc,
  },
  {
    id: 1,
    name: '消防水罐',
    num: '500',
    imgUrl: xfsg,
  },
  {
    id: 2,
    name: '消防水箱',
    num: '200',
    imgUrl: xfsx,
  },
])
// 自然水源list
const equipList = reactive([
  {
    id: 0,
    type: '消防水池',
    state: '完好',
  },
  {
    id: 1,
    type: '泡沫储罐',
    state: '完好',
  },
  {
    id: 2,
    type: '水幕系统',
    state: '完好',
  },
  {
    id: 3,
    type: '自动报警系统',
    state: '完好',
  },
])
</script>
<style lang="less" scoped>
.facilityBox {
  color: #fff;
  height: 100%;

  .facility-top {
    height: 370px;

    .main {
      width: 460px;
      height: 315px;
      padding-left: 10px;
      background: rgba(1, 10, 15, 0.5);

      .timeLineBox {
        margin-top: 50px;
        display: flex;
        justify-content: space-between;

        img {
          width: 30px;
          height: 36px;
          margin-right: 30px;
          border: none;
        }

        :deep(.n-timeline-item-timeline__circle ){
          background-color: #fff;
          position: absolute;
          z-index: 1;
        }

        :deep(.n-timeline-item-timeline__line) {
          background-color: rgba(0, 255, 255, 1);

          &:nth-of-type(1) {
            width: 120px;
            left: -30px;
            position: absolute;
            z-index: 0;
          }
        }

        .n-timeline.n-timeline--horizontal > .n-timeline-item {
          width: 100px;

          :deep(.n-timeline-item-content) {
            .n-timeline-item-content__title {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }

            .n-timeline-item-content__content {
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
              position: absolute;
              top: -40px;
            }
          }
        }

        :deep(  .n-timeline
          .n-timeline-item:last-child
          .n-timeline-item-timeline
          .n-timeline-item-timeline__line)
         {
          display: block;
        }
      }

      .xfsBox {
        margin-left: 30px;
        margin-top: 3px;
        position: relative;

        .xfsLine {
          width: 1px;
          height: 50px;
          border: 1px solid #00ffcc;
          position: absolute;
          top: -50px;
          left: 15px;
        }

        .xfsMessageBox {
          width: 150px;
          height: 60px;
          background: rgba(0, 0, 0, 0.6);
          border: 1px solid #00ffcc;
          font-size: 20px;
          font-weight: bolder;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            bottom: -35%;
            left: 50%;
            width: 2px;
            height: 19px;
            background: #ff9900;
          }

          span {
            width: 100%;
            text-align: center;
          }

          div:nth-of-type(1) {
            color: rgba(0, 255, 204, 1);
          }
        }

        .xfsMBox {
          @apply flex-center;
          width: 150px;
          height: 60px;
          background: rgba(0, 0, 0, 0.6);
          border: 1px solid #00ffcc;
          font-size: 20px;
          font-weight: bolder;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          position: relative;
          text-align: center;

          &::before {
            content: '';
            position: absolute !important;
            top: -35% !important;
            left: 50% !important;
            width: 2px;
            height: 19px;
            background: #ff9900;
          }
        }

        img {
          width: 34px;
          height: 40px;
          border: none;
        }

        .line {
          width: 384px;
          height: 23px;
          border: 6px solid #ff9900;
          border-top: none;
          border-right: none;
          margin-left: 13px;
        }
      }
    }
  }

  .facility-center {
    height: 180px;

    .rgWaterBox {
      padding: 10px 0;
      overflow-y: auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 20px;
      font-weight: bolder;
      background: rgba(1, 10, 15, 0.5);
    }

    .rgWaterList {
      width: 150px;
      text-align: center;

      img {
        width: 50px;
        height: 50px;
        border: none;
        margin: auto;
      }

      span {
        font-size: 24px;
      }
    }
  }

  .facility-bottom {
    height: 130px;
    margin: 10px 0;

    .zrWaterBox {
      height: 80px;
      background: rgba(1, 10, 15, 0.5);
      display: flex;
      align-items: center;
      padding-left: 10px;
      position: relative;

      img {
        width: 40px;
        height: 40px;
        border: none;
        margin-right: 5px;
      }

      .textBox {
        width: 100%;
        display: flex;
        justify-content: space-around;
        font-size: 20px;
        position: absolute;
        top: 10px;
        left: 0;
      }

      .line {
        width: 354px;
        height: 6px;
        margin-top: 10px;
        background-image: linear-gradient(
          to right,
          rgba(0, 255, 255, 1) 0%,
          rgba(0, 255, 255, 1) 50%,
          transparent 50%
        );
        background-size: 47px 10px;
        background-repeat: repeat-x;
      }
    }
  }

  .titleBox {
    padding: 5px;
    // background: linear-gradient(to right, #0a0909, rgba(225, 225, 225, 0));
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-weight: bolder;
      font-size: 28px;
    }
  }

  .equipBox {
    width: 40%;
    height: 36px;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    border: 1px solid #00ffcc;
    padding: 5px 10px;
    margin-bottom: 10px;

    .ok {
      color: #aaef4b;
    }

    .noOk {
      color: red;
    }
  }

  .titleFlag {
    width: 6px;
    height: 18px;
    display: inline-block;
    background: url(@/assets/image/titleFlag.png) no-repeat;
    margin-right: 10px;
  }
}
</style>
